<template>
  <div class="app-container">
    <el-form label-width="80px" :rules="rules" ref="gym" :model="gym">
      <el-form-item label="场馆名称" prop="name">
        <el-input v-model="gym.name" placeholder="请输入场馆名称"/>
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input v-model="gym.tel" placeholder="18000000000"/>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="gym.address" placeholder="地址位置"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="gym.email" placeholder="122222@163.com"/>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="gym.sort"  controls-position="right"/>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-radio-group v-model="gym.state">
          <el-radio :label="1" :value="1">闭馆</el-radio>
          <el-radio :label="0" :value="0">正常</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 场馆图片：TODO -->
<!--      <el-form-item label="场馆图片">
        <el-upload
          name="file"
          class="avatar-uploader"
          action="http://localhost:8080/upload/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="gym.avatar" :src="'http://rhfe83gch.hn-bkt.clouddn.com/' + gym.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>-->
      <el-form-item label="介绍" prop="introduce">
        <el-input v-model="gym.introduce" placeholder="场馆介绍"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="handleAddOrEdit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import gym from "../../api/gym";
export default {
  data(){
    return{
      gym: {
        introduce: "",
        avatar: "",
      },
      dataList: [],
      saveBtnDisabled: false,       // 防止表单重复点击
      rules: {
        name: [
          { required: true, message: '请输入场馆名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的电话号码', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' },
          { min: 2, max: 40, message: '请输入地址', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { min: 5, max: 25, message: '请输入正确的邮箱', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        state: [
          { required: true, message: '请选择场馆状态', trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '请填写场馆介绍', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 获取路由地址里面的参数
    if(this.$route.params && this.$route.params.id){
      this.queryById(this.$route.params.id)
    }
  },
  methods:{
    // 添加
    handleAddOrEdit(){
      this.saveBtnDisabled = true;

      if(this.$route.params && this.$route.params.id){
        // 修改
        gym.edit(this.gym).then(res =>{
          // 弹出提示信息
          this.$message.success(res.message);
          // 修改完成之后，跳转到列表页面
          this.$router.push({ path: '/gym/list' })
        });
      }else{
        // 添加
        gym.add(this.gym).then(res =>{
          // 弹出提示信息
          this.$message.success(res.message);
          // 添加完成之后，跳转到列表页面
          this.$router.push({ path: '/gym/list' })
        });
      }
      this.saveBtnDisabled = false;
    },
    // 根据id查询
    queryById(id){
      gym.queryById(id).then(res =>{
        this.gym = res.data;
      });
    },


    handleAvatarSuccess(res, file){
      this.gym.avatar = res.data;
    },
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    reset(){
      this.gym = {}
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
